﻿@page "/CarouselTest"

<h3>Component</h3>

<!-- 需引用 BootstrapBlazor !-->
<link href="_content/BootstrapBlazor.FontAwesome/css/font-awesome.min.css" rel="stylesheet">
<link href="_content/BootstrapBlazor/css/bootstrap.blazor.bundle.min.css" rel="stylesheet">

    @if (Images.Count > 0)
{
    <BootstrapBlazor.Components.Carousel IsFade="true">
        @foreach (var image in Images)
        {
            <BootstrapBlazor.Components.CarouselItem CaptionClass="d-none d-md-block">
                <ChildContent>
                    <img src=@image alt="demo-image" />
                </ChildContent>
            </BootstrapBlazor.Components.CarouselItem>
        }

        @*  <BootstrapBlazor.Components.CarouselItem CaptionClass="d-none d-md-block">
    <ChildContent>
    <img src="./images/6162f127bcad72e7309465ab688d13a5.jpeg" alt="demo-image" />
    </ChildContent>
    </BootstrapBlazor.Components.CarouselItem>
    <CarouselItem CaptionClass="d-none d-md-block">
    <ChildContent>
    <img src="./images/7b056041e81942aac012dd9b68ba104a.jpeg" alt="demo-image" />
    </ChildContent>
    </CarouselItem> *@
    </BootstrapBlazor.Components.Carousel>
    }

<Button Text="Add Image" OnClick="AddImageClick" />

<script src="_content/BootstrapBlazor/js/bootstrap.blazor.bundle.min.js"></script>
@code {
    private string selectedSlide = "2";

    public List<string> Images { get; set; } = new List<string>();


    protected override Task OnAfterRenderAsync(bool firstRender)
    {
        return base.OnAfterRenderAsync(firstRender);
    }

    private async Task AddImageClick()
    {
        Images = new List<string>
        {
            "./images/7b056041e81942aac012dd9b68ba104a.jpeg",
            "./images/6162f127bcad72e7309465ab688d13a5.jpeg"
        };
    }
}
